// 三、创建 axios 请求
// 3.1 封装是一个基本的 axios 实例
// 3.2 安装 axios, 安装 npm i axios
// 3.3 导入 axios
import { logout } from "@/utils";
import axios from "axios";
// @ts-ignore
import { ElMessage } from "element-plus";

// 3.4写一个基本的
const instance = axios.create({
  // 3.5这个需要去接口文档查看， http://xue.cnkdl.cn:9082/mall-admin/swagger-ui.html
  baseURL: "http://xue.cnkdl.cn:9082/mall-admin/",
  // baseURL: "/api",
  timeout: 5000,
});

// 3.6写请求拦截器 - 每个请求都将被毁掉方法，在这个页面上只有一个 text 函数
instance.interceptors.request.use(
  (config) => {
    // 9.12获取token,在请求头里面带上
    const token = localStorage.getItem("token");
    // 9.13判断是否带有token
    if (token) {
      // 9.14有 token 就让请求携带 token 或者携带一个 default token 或者 不携带 token
      // 9.15 这里的 token 是去到接口文档 Authorize,Name: Authorization
      // 9.16去到 router文件夹 index.ts
      config.headers["Authorization"] = token;
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 3.7响应拦截器 - 每个响应将被回调方法，在这个页面上只有一个 code 函数
instance.interceptors.response.use(
  (response) => {
    // 8.25 由于业务失败，也是响应成功，响应状态码时200，还是会进入这个函数
    // 8.26使用 element-plus 里面的 ElMessage 提示用户一个错误信息
    // 30.46因为 echarts 的请求接口返回的状态码 errno 是0，所以我们条件这里加上0,去到 types 文件夹里面的 api.d.ts
    if (response.data.code !== 200 && response.data.errno !== 0) {
      ElMessage({
        type: "error",
        message: `操作失败，错误码为${response.data.code},消息为${response.data.message}`,
      });

      // 十三、如果用户的 token 过期了，我们需要判断
      if (
        response.data.code === 401 &&
        response.data.message.includes("token已经过期")
      ) {
        // 13.1退出登录的 utils 方法继续调用
        logout();
      }
    }
    return response.data;
  },
  (error) => {
    // console.log(error)
    // 20.42因为取消请求会报错，所以我们做个条件判断
    // 20.43去到 admin.vue
    // if (error.code !== 'ERR_CANCELED') {
    if (error.code !== "ERR_CANCELED") {
      // 19.22这里提示框弹出消息,去到 admin.vue
      ElMessage({
        type: "error",
        message: `发送了错误，${error.message}`,
      });
    }

    // 只有当响应状态码不是200时才会进入这个函数，error
    return Promise.reject(error);
  }
);

// 3.8导出请求
// 3.9在http文件夹新建 api.ts 文件，去到该文件
export default instance;
